<%@ page import="org.apache.commons.lang.StringUtils" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getContextPath();
    Object email = request.getSession().getAttribute("email");
%>
<!DOCTYPE HTML>
<html>
<head>
    <title>${story.title}</title>
    <jsp:include page="../common/common-css.jsp"></jsp:include>
    <jsp:include page="../common/common-js.jsp"></jsp:include>
    <style type="text/css">
        a {
            text-decoration: none
        }

        a:hover {
            text-decoration: none
        }

        a:link {
            text-decoration: none
        }

        a:visited {
            text-decoration: none
        }

    </style>
</head>
<body style="background-color: #f9f9f9;padding: 0px">
<div class="container-fluid" style="padding: 0px;margin: 0px">
    <div class="col-xs-0 col-sm-0 col-md-1 col-lg-2"></div>
    <div class="col-xs-12 col-sm-12 col-md-7 col-lg-5"
         style="background-color: #ffffff;padding: 5px 5px 100px;border-right: 1px solid #eaeaea">
        <table style="width: 100%">
            <tr>
                <td style="padding: 10px;">
                    <h3>
                        ${story.title}
                    </h3>
                    <hr style="width: 100%;">
                </td>
            </tr>
            <tr>
                <td style="padding: 10px;">
                    <blockquote style="padding-left: 5px">
                        ${story.subTitle}
                    </blockquote>
                </td>
            </tr>
            <tr>
                <td style="padding: 10px;color: #cccccc">
                    <span class="badge" style="background-color: #CC66CC">${story.tag}</span>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="padding: 10px;color: #999999">
                    <p>
                        <small>作者：${story.name}</small>
                    </p>

                    <p>
                        <small>${story.createTime}&nbsp;&nbsp;阅读：${story.readCount}</small>
                    </p>
                </td>
            </tr>
        </table>
        <table style="width: 100%">
            <tr>
                <td align="center" style="padding: 10px">
                    <img src="${story.imgUrl}-750x500" class="img-responsive img-rounded">
                </td>
            </tr>
            <tr>
                <td style="padding: 10px">
                    <p>
                        ${story.content}
                    </p>
                </td>
            </tr>
        </table>
        <hr style="width: 100%">
        <p style="padding-left: 10px;color: darkgray">阅读：${story.readCount}</p>

        <p style="padding-left: 10px;color: darkgray">
            <a href="<%=basePath%>/story"><i class="icon-eye-open">&nbsp;发现更多</i></a>
        </p>

        <p style="padding-left: 10px;color: darkgray">
            <a href="<%=basePath%>/writeStory"><i class="icon-facetime-video">&nbsp;写文章,做原创</i></a>
        </p>
        <hr style="width: 100%">
        <p style="padding-left: 10px">欢迎关注我们</p>

        <p style="padding-left: 10px">QQ官方群：221052890</p>

        <p style="padding-left: 10px">微信公众号：劉員外</p>
        <hr style="width: 100%">
        <table>
            <tr>
                <td colspan="2" style="padding: 30px 0px">
                    <table style="width: 100%">
                        <tr>
                            <td style="width: 50%" align="center">
                                <img src="<%=basePath%>/img/qqQrcode.png" class="img-responsive img-thumbnail"
                                     style="width: 50%">

                                <p style="padding-top: 5px">劉員外官方群</p>
                            </td>
                            <td style="width: 50%" align="center">
                                <img src="<%=basePath%>/img/qrcode.jpg" class="img-responsive img-thumbnail"
                                     style="width: 50%">

                                <p style="padding-top: 5px">微信公众号</p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-5" style="padding: 40px 15px">
        <a href="<%=basePath%>/user/queryinfo?email=${story.email}">
            <table>
                <tr>
                    <td>
                        <p><img src="${story.logo}-120x120" style="width: 80px;height: 80px"
                                class="img-responsive img-circle"></p>
                    </td>
                    <td style="padding: 10px 15px" valign="top">
                        <p>${story.name}</p>
                        <span class="label label-danger" style="margin: 0px">自由创作者</span>
                    </td>
                </tr>
            </table>
        </a>
        <blockquote style="width: 100%;color: slategray">作者简介：${story.remark} </blockquote>
        <p><a href="<%=basePath%>/myStory?email=${story.email}"><i class="icon-bookmark-empty">&nbsp;作者更多好文</i></a></p>
        <hr style="width: 100%">
        <p>
            <a href="<%=basePath%>/story"><i class="icon-eye-open">&nbsp;发现更多美好</i></a>
        </p>

        <p>
            <a href="<%=basePath%>/writeStory"><i class="icon-facetime-video">&nbsp;写文章,做原创</i></a>
        </p>
        <hr style="width: 100%">
        <table style="width: 100%">
            <tr>
                <td colspan="2" style="padding: 10px">
                    <span>精彩评论</span>
                    <span style="padding-left: 10px">
                        <a href="javascript:toReply()">
                            <i class="icon-comment-alt"> &nbsp;留言</i>
                        </a>
                    </span>
                </td>
            </tr>
            <tr>
                <td style="width: 50px;border-bottom: 1px solid green"></td>
                <td style="border-bottom: 1px solid #e8e8e8"></td>
            </tr>
            <tr class="commentBox" style="display: none">
                <td colspan="2">
                    <table style="width: 100%;margin: 10px 0px">
                        <tr>
                            <td style="width: 100%">
                                <input type="text"
                                       style="width: 100%;border: none;padding: 5px;background-color: #f9f9f9"
                                       id="comment" placeholder="在这儿输入留言">
                            </td>
                            <td style="padding: 0px 10px" align="center">
                                <a class="btn btn-default-color" href="javascript:reply('${story.uuid}')">回复</a>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <hr style="width: 100%;margin: 5px 0px">
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <div class="comments" style="padding: 10px 0px">
            <p style="padding: 20px;color: #cccccc" class="allComments">Comments will be here!</p>
        </div>
        <p class="text-center loadMore" style="padding: 40px 0px;display: none">加载更多</p>
        <table style="width: 100%">
            <tr>
                <td colspan="2" style="padding: 10px">十佳好文</td>
            </tr>
            <tr>
                <td style="width: 50px;border-bottom: 1px solid green"></td>
                <td style="border-bottom: 1px solid #e8e8e8"></td>
            </tr>
        </table>
        <div class="story" style="padding: 10px 0px">
            <p style="padding: 20px;color: #cccccc" class="allStories">Top 10 stories will bu Here !</p>

        </div>
    </div>
</div>
<jsp:include page="../common/common-html.jsp"></jsp:include>
</body>

<script type="application/javascript">
    var pageNo = 1;
    var pageSize = 10;

    function loadStory(pageNo, pageSize) {
        var url = "<%=basePath%>/story/list";
        var param = {pageNo: pageNo, pageSize: pageSize, orderField: "read_count", storyType: 0};
        var item = '';
        var logo = '';
        $.post(url, param, function (data, status) {
            var stories = data;
            if (stories.length > 0) {
                $(".story").empty();
                for (var i = 0; i < stories.length; i++) {
                    logo = '';
                    if (stories[i].imgUrl == null || stories[i].imgUrl == '' || stories[i].imgUrl == undefined || stories[i].imgUrl == '<%=basePath%>/img/product.png') {
                        logo = '<%=basePath%>/img/product.png';
                    } else {
                        logo = stories[i].imgUrl + '-360x200';
                    }
                    item = '';
                    item += '<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12"style="padding: 0px">';
                    item += '<a style="text-decoration: none;" href="<%=basePath%>/story/info?uuid=' + stories[i].uuid + '">';
                    item += '<div class=" col-xs-4 col-sm-4 col-md-4 col-lg-3 text-center"style="padding: 0px ;">';
                    item += '<img class="img-responsive" src="' + logo + '" alt="' + stories[i].name + '">';
                    item += '</div>';
                    item += '<div class=" col-xs-8 col-sm-8 col-md-8 col-lg-9">';
                    item += '<p style="font-weight: bold;">' + stories[i].title + '</p>';
                    item += '<p style="color: #999999">' + stories[i].subTitle + '</p>';
                    item += '<table style="width: 100%">';
                    item += '<tr>';
                    item += '<td><p><span class="badge" style="background-color: #CC66CC">' + stories[i].tag + '</span></p></td>';
                    item += '<td align="right"><p style="color: #999999;" class="text-right"><small>阅读：' + stories[i].readCount + '</small></p></td>';
                    item += '</tr>';
                    item += '</table>';
                    item += '</div>';
                    item += '</a>';
                    item += '<hr>';
                    item += '</div>';
                    item += '<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12"style="padding: 0px"><hr></div>';
                    $(".story").append(item);
                }
            }
        })
    }

    function incrReadCount() {
        var url = '<%=basePath%>/story/incrReadCount?uuid=${story.uuid}';
        $.post(url, function (data, status) {

        });
    }
    function loadComments(pageNo, pageSize) {
        var uuid = '${story.uuid}';
        var url = '<%=basePath%>/note/list';
        var param = {uuid: uuid, pageNo: pageNo, pageSize: pageSize};
        $.post(url, param, function (data, status) {
            if (data != null && data.length > 0) {
                $(".comments").empty();
                $(".allComments").remove();
                var item = '';
                for (var i = 0; i < data.length; i++) {
                    item += parseNote(data[i].email, data[i].logo, data[i].content, data[i].name, data[i].createTime);
                }
                $(".comments").prepend(item);
                if (data.length == pageSize) {
                    $(".loadMore").show();
                }
            }
        })
    }
    function toReply() {
        $(".commentBox").show();
    }
    function parseNote(email, logo, content, name, createTime) {
        if (logo != null && logo != '' && logo != undefined) {
            logo += "-120x120";
        }
        if (logo == undefined) {
            logo = '<%=basePath%>/img/user.png';
        }
        var url = "<%=basePath%>/user/queryinfo?email=" + email;
        var subItem = '';
        subItem += '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"style="padding: 0px">';
        subItem += '<table style="width: 100%;">';
        subItem += '<tr>';
        subItem += '<td style="width: 50px;height: 50px;padding: 0px 5px" align="center" valign="top">';
        subItem += '<a href="' + url + '"><img class="img-responsive img-circle"src="' + logo + '" /></a>';
        subItem += '</td>';
        subItem += '<td style="padding: 5px 5px;color: #d3d3d3;"><small>' + name + '</small></td>';
        subItem += '</tr>';
        subItem += '<tr>';
        subItem += '<td>&nbsp;</td>';
        subItem += '<td style="padding: 0px 5px;">' + content + '</td>';
        subItem += '</tr>';
        subItem += '<tr>';
        subItem += '<td>&nbsp;</td>';
        subItem += '<td style="color: #d3d3d3;padding: 10px 5px 0px;"><small>' + createTime + '</small></td>';
        subItem += '</tr>';
        subItem += '<tr><td>&nbsp;</td><td><hr style="width: 100%;margin: 0px;padding: 0px"></td></tr>';
        subItem += '</table>';
        subItem += '</div>';
        return subItem;
    }
    function reply(uuid) {
        $(".btn").blur();
        var email = '<%=email%>';
        if (!validateEmail(email)) {
            return;
        }
        var content = $.trim($('#comment').val());
        if (content == '') {
            alerErr("输入留言内容");
            return;
        }
        var url = "<%=basePath%>/note/add";
        var param = {content: content, uuid: uuid};
        $.post(url, param, function (data, status) {
            if (status == 'success') {
                $('#comment').val('');
                $(".commentBox").hide();
                $(".allComments").remove();
                var temp = parseNote(data.data.email, data.data.logo, data.data.content, data.data.name, data.data.createTime);
                $('.comments').prepend(temp);
            } else {
                aler(data);
            }
        })
    }
    $(function () {
        incrReadCount();
        loadComments(pageNo++, pageSize);
        loadStory(0, 10);
        $('img').addClass('img-responsive img-rounded');
    })
</script>

</html>
